<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 标签选择器 */
        body,html{
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000000;
}
table{
    border-collapse: collapse; /* 折叠表格边框 */
    width: 100%;
    table-layout: fixed;
}
thead{
    background: #3d444c;
    color: #ffffff;
}
td,th{
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <table id="jsTrolley">
    <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
    <tbody>
        <tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
    </tbody>
    <tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
    <script type="text/javascript">
<!--html 模块是个简化版的购物车，tbody为商品列表，tfoot为统计信息,系统会随机在列表中生成一些初始商品信息-->
<!--1. 完成add函数，在列表后限制items商品信息，参数items为{name:String, price:Number}组成的数组-->
<!--2. 完成bind函数，点击每一行的删除按钮(包括通过add增加的行) 从列表中删除对应行-->
// 新增行
function add(items) {
    var tbody = document.getElementsByTagName('tbody')[0] // 商品列表 getElementsByTagName 返回HTMLCollection，取[0]得到子标签dom对象
    var tfoot = document.getElementsByTagName('tfoot')[0] // 统计信息(初始商品信息)  for遍历：for (let i in a) {console.log(i, a[i])}
    // 获取初始数据
    let count = tbody.children.length                           // dom对象子标签计数：children.length
    let price = parseFloat(tfoot.innerText.match(/\d+.\d+/)[0]) // 正则表达式：\d+.\d+ '.'左右两边取匹配任何包含至少一个数字的字符； innerText取出标签中的text内容
    // 新增行
    let tr = ''
    console.log(items)
    console.log(items.length)
    for (let i = 0; i < items.length; i++) {
        count += 1
        price += items[i].price
        // `${}` 模板字符串，在字符串中嵌入变量，在使用的时候需要将变量写在${}中
        // .toFixed(2) 强制保留2位小数
        tr += `<tr><td>${items[i].name}</td><td>${items[i].price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>`
        console.log('hello')
    }
    tbody.innerHTML += tr // 新增tr元素， 取出标签的html元素
    // innerHTML 取出标签中的标签元素
    tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${price.toFixed(2)}(${count}件商品)</td></tr>` // 修改tfoot
}

// 绑定事件，事件代理
function bind() {
    var tbody = document.getElementsByTagName('tbody')[0]
    var tfoot = document.getElementsByTagName('tfoot')[0]
    // 在dom元素上绑定点击事件
    tbody.addEventListener('click', function (e) {
        let num = tbody.children.length
        // 过滤点击的是否是a标签
        if (e.target.tagName === "A") { // e.target eventTarget判断是否时a标签
            // 获取数据
            let price = parseFloat(e.target.parentElement.parentElement.innerHTML.match(/\d+.\d+/)[0])
            let total = tfoot.innerHTML.match(/\d+.\d+/)[0]
            e.target.parentElement.parentElement.remove()  // 绑定到a标签，删除整行标签时向上parentElement两次，找到<tr>并删除
            tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${(total - price).toFixed(2)}(${num - 1}件商品)</td></tr>`
        }
    })
}
// 执行绑定事件
bind()
    </script>
</body>

</html>